<script setup>
import { Head, Link } from '@inertiajs/vue3'
import AdminLayout from '@/Layouts/AdminLayout.vue'
import { 
    ArrowLeftIcon,
    PencilIcon,
    UserIcon,
    DocumentTextIcon,
    ChatBubbleLeftIcon,
    CalendarIcon,
    CheckCircleIcon,
    XCircleIcon
} from '@heroicons/vue/24/outline'

const props = defineProps({
    user: {
        type: Object,
        required: true
    }
})

// 格式化日期
const formatDate = (dateString) => {
    if (!dateString) return '未验证'
    const date = new Date(dateString)
    return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    })
}
</script>

<template>
    <AdminLayout>
        <Head :title="`用户详情 - ${user.name}`" />

        <div class="space-y-6">
            <!-- 页面头部 -->
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-x-4">
                    <Link
                        :href="route('admin.users.index')"
                        class="inline-flex items-center rounded-md p-2 text-gray-400 hover:text-gray-500 hover:bg-gray-100 transition-colors"
                    >
                        <ArrowLeftIcon class="h-5 w-5" />
                        <span class="sr-only">返回</span>
                    </Link>
                    <div>
                        <h1 class="text-3xl font-bold text-gray-900">用户详情</h1>
                        <p class="mt-2 text-sm text-gray-600">查看用户信息和统计数据</p>
                    </div>
                </div>
                <Link
                    :href="route('admin.users.edit', user.id)"
                    class="inline-flex items-center gap-x-2 rounded-md bg-orange-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-600 transition-colors"
                >
                    <PencilIcon class="h-5 w-5" />
                    编辑用户
                </Link>
            </div>

            <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
                <!-- 左侧：用户信息 -->
                <div class="lg:col-span-2 space-y-6">
                    <!-- 基本信息 -->
                    <div class="bg-white rounded-lg border border-gray-200 shadow-sm">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h2 class="text-lg font-semibold text-gray-900">基本信息</h2>
                        </div>
                        <div class="p-6">
                            <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">用户ID</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ user.id }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">用户名</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ user.name }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">邮箱</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ user.email }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">邮箱验证状态</dt>
                                    <dd class="mt-1">
                                        <span
                                            :class="[
                                                'inline-flex items-center gap-x-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium',
                                                user.email_verified_at 
                                                    ? 'bg-green-100 text-green-800'
                                                    : 'bg-yellow-100 text-yellow-800'
                                            ]"
                                        >
                                            <component
                                                :is="user.email_verified_at ? CheckCircleIcon : XCircleIcon"
                                                class="h-3 w-3"
                                            />
                                            {{ user.email_verified_at ? '已验证' : '未验证' }}
                                        </span>
                                    </dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">注册时间</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ formatDate(user.created_at) }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">最后更新</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ formatDate(user.updated_at) }}</dd>
                                </div>
                            </dl>
                        </div>
                    </div>
                </div>

                <!-- 右侧：统计数据 -->
                <div class="space-y-6">
                    <!-- 统计信息 -->
                    <div class="bg-white rounded-lg border border-gray-200 shadow-sm">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h2 class="text-lg font-semibold text-gray-900">统计数据</h2>
                        </div>
                        <div class="p-6 space-y-4">
                            <div class="flex items-center justify-between rounded-lg bg-gray-50 p-4">
                                <div class="flex items-center gap-x-3">
                                    <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-orange-100">
                                        <DocumentTextIcon class="h-6 w-6 text-orange-600" />
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium text-gray-500">文章数</p>
                                        <p class="text-2xl font-bold text-gray-900">{{ user.posts_count || 0 }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center justify-between rounded-lg bg-gray-50 p-4">
                                <div class="flex items-center gap-x-3">
                                    <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100">
                                        <ChatBubbleLeftIcon class="h-6 w-6 text-blue-600" />
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium text-gray-500">评论数</p>
                                        <p class="text-2xl font-bold text-gray-900">{{ user.comments_count || 0 }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </AdminLayout>
</template>

